<template>
  <!-- 需要我审批的 -->
  <el-main>
    <el-row>
      <el-tabs class="todo-tabs">
        <el-tab-pane>
          <template #label>
            <el-badge :value="taskCount" :max="99" :offset="[10, 5]" type="warning">
              待办
            </el-badge>
          </template>
          <MyTask v-model:flag="flag" @setTaskCount="setTaskCount"></MyTask>
        </el-tab-pane>
        <el-tab-pane label="会签">
          <template #label>
            <el-badge :value="candidateCount" :max="99" :offset="[10, 5]" type="warning">
              候选人待办
            </el-badge>
          </template>
          <CandidateUser v-model:flag="flag" @setCandidateCount="setCandidateCount"></CandidateUser>
        </el-tab-pane>
      </el-tabs>
    </el-row>
  </el-main>
  <!-- <el-drawer class="drawer" title="发起审批" v-model="isStartProcess" direction="rtl" size="90%"
    :close-on-press-escape="false">
    <StartProcess v-model:isStartProcess="isStartProcess"></StartProcess>
  </el-drawer> -->
</template>

<script setup>
import MyTask from './MyTask.vue';
import CandidateUser from './CandidateUser.vue';
// import StartProcess from '../myprocess/StartProcess.vue';
import { ref } from 'vue'
// const isStartProcess = ref(false)
const taskCount = ref(0)
const candidateCount = ref(0)
function setTaskCount(count) {
  taskCount.value = count
}
function setCandidateCount(count) {
  candidateCount.value = count
}
// 用于子组件通信
const flag = ref(0)
</script>

<style lang="less" scoped>
.todo-tabs {
  width: 100%;

}
</style>